<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
#div1{
	position:absolute;
	top:0px;
	left:0px;
	border-radius:256px;
	height:256px;
	width:256px;
	background:#ccc;
	overflow:hidden;

}	
#div1 img{
	margin-left:-90px;	
}


ul{
	width:80px;
	height:150px;
	background:#ccc;
	border-radius:10px;
	position:absolute;
	list-style:none;
	display:none;
}
ul li{
	text-align:center;
	color:#fff;
	font-weight:bold;
	line-height:25px;
	text-decoration:none;
}

</style>
<body>
<div id='div1'><img src="logo.jpg"></div>
<img src="tree.jpg" id='div1'>


<ul>

	<li><a href="http://baidu.com" target='_blank'>百度</a></li>
	<li>2菜单</li>
	<li>3菜单</li>
	<li>4菜单</li>
	<li>5菜单</li>
	<li>6菜单</li>
</ul>
</body>
<script type="text/javascript">
// $(document).mousedown(function(event){
// code=event.button;
// alert(code);
// });

// $(document).contextmenu(function(event){
// x=event.clientX;
// y=event.clientY;
// btn=event.button;
// if(btn==2){
// 	$('ul').css({'left':x+'px','top':y+'px'}).show();
// 	return false;
// }
// });


function drag(obj){
	obj.bind('mousedown',start);

	function strat(event){
		deltaX=event.clientX-obj.offset().left;
		deltaY=event.clientY-obj.offset().top;

		$(document).bind('mousemove',move);
		$(document).bind('mouseup',stop);
		return false;
	}

	function move(event){
		obj.css({
			'left':(event.clientX-deltaX)+'px',
			'top':(event.clientY-deltaY)+'px'
		})
		return false;
	}

	function stop(){
		$(document).unbind('mousemove',move);
		$(document).unbind('mouseup',stop);
	}
}
obj=$('#div1');
drag(obj);
</script>
</html>